class Food {
  // 定义一个属性表示食物所对应的元素
  element: HTMLElement;
  MAX: number;
  constructor(MAX: number = 10) {
    this.MAX = MAX;
    // !: 设置我们认为不可能为空
    this.element = document.querySelector(".box-food")!;
  }

  // 定义一个获取食物X轴坐标方法
  get X() {
    return this.element.offsetLeft;
  }

  // 定义一个获取食物Y轴坐标方法
  get Y() {
    return this.element.offsetTop;
  }

  // 更改食物的位置(随机生成)
  change() {
    // 我们定义的盒子大小为 300x300
    // 因为食物本身也占 10x10 位置的原因, 所以食物可以出现的坐标: MIN为0 MAX为290
    // 还有就是我们规则为蛇每次移动一格 一格就是10 所以不能出现11,12,13,14这种数值 必须可以被10整除
    // 所以最终MAX=29 最后数值生成再进行 x10
    // 随机生成
    const top = Math.round(Math.random() * this.MAX) * 10;
    const left = Math.round(Math.random() * this.MAX) * 10;
    this.element.style.top = `${top}px`;
    this.element.style.left = `${left}px`;
  }
}

export default Food;